<template>
  <div class="reply-box" v-if="isShow || show">
    <div class="box-normal">
      <div class="reply-box-avatar">
        <img class="shoka-avatar" :src="userInfo.avatar || avatar" alt="" />
      </div>
      <div class="reply-box-warp">
        <textarea
          class="reply-box-textarea"
          v-model="content"
          :style="sendActive ? lineStyle : ''"
          @input.prevent="inputActive"
          :placeholder="placeholderText"
        ></textarea>
      </div>
      <div class="reply-box-send" :class="sendActive ? 'send-active' : ''" @click="handleAdd">评论</div>
    </div>
    <div class="box-expand">
      <Emoji @add-emoji="handleEmoji" @choose-type="handleType"></Emoji>
    </div>
  </div>
</template>

<script setup>
import { sendComment } from '@/api/comment';
import Emoji from '@/components/Emoji/index.vue';
import { useUsersStore } from '@/store/user';
import { emojiList } from '@/utils/emoji.js';
import { tvList } from '@/utils/tv.js';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { computed, reactive, toRefs } from 'vue';
import avatar from '/public/images/default-avatar.png';

const { userInfo } = storeToRefs(useUsersStore());

const lineStyle = {
  lineHeight: 'normal',
  borderColor: 'var(--color-pink)',
  backgroundColor: 'var(--grey-0)',
};
const emit = defineEmits(['getList']);
const props = defineProps({
  // 显示回复框
  showReply: {
    type: Boolean,
    default: true,
  },
  // 回复数据
  parentData: {
    type: Object,
    default: null,
  },
  // 文章id
  articleId: {
    type: [String, Number],
    default: '',
  },
  // 是否一直展示
  isShow: {
    type: Boolean,
    default: false,
  },
});
const data = reactive({
  nickname: '',
  sendActive: false,
  show: props.showReply,
  commentContent: [], // 处理表情数组
  emojiType: 0,
  commentForm: {
    articleId: '',
    content: '',
    rootId: '',
    toCommentId: '',
    toCommentUserId: '',
    type: 0,
  },
  content: '', // 评论内容
  imgStr: '', //转为图片后
});
const { nickname, sendActive, show, commentContent, emojiType, commentForm, content, imgStr } = toRefs(data);
const placeholderText = computed(() => (nickname.value ? `回复 @${nickname.value}：` : '发一条友善的评论'));
const inputActive = (e) => {
  if (content.value.length == 0) {
    sendActive.value = false;
  } else {
    sendActive.value = true;
  }
};
const handleEmoji = (data) => {
  commentContent.value = [...commentContent.value, data];
  sendActive.value = true;
  const emjioStr = getEmojiContent(commentContent.value);
  content.value += data.key;

  imgStr.value = content.value + emjioStr;
};
const handleType = (key) => {
  emojiType.value = key;
};

// 处理表情
const getEmojiContent = (content) => {
  const list = content.map((item) => {
    const emojiContent = item.key.replace(/\[.+?\]/g, (str) => {
      if (item.type === 0) {
        if (emojiList[str] === undefined) {
          return str;
        }
        return (
          // eslint-disable-next-line quotes
          "<img src= '" +
          emojiList[str] +
          // eslint-disable-next-line quotes
          "' width='21' height='21' style='margin: 0 1px;vertical-align: text-bottom'/>"
        );
      }
      if (item.type === 1) {
        if (tvList[str] === undefined) {
          return str;
        }
        return (
          // eslint-disable-next-line quotes
          "<img src= '" + tvList[str] + "' width='21' height='21' style='margin: 0 1px;vertical-align: text-bottom'/>"
        );
      }
      return str;
    });
    return emojiContent;
  });
  return list.join('');
};

const handleAdd = async () => {
  if (!userInfo.value.id) {
    ElMessage({
      type: 'warning',
      message: '请登录后进行评论',
    });
    return;
  }
  if (content.value.trim === 0) {
    ElMessage({
      type: 'warning',
      message: '评论不能为空',
    });
    return;
  }

  if (!props.parentData) {
    commentForm.value = {
      articleId: props.articleId,
      content: imgStr.value.replace(/\[.*?\]/g, '') || content.value,
      rootId: -1,
      toCommentId: -1,
      toCommentUserId: -1,
      type: 0,
      avatar: userInfo.value.avatar,
    };
  } else {
    commentForm.value = {
      articleId: props.parentData.articleId,
      content: imgStr.value.replace(/\[.*?\]/g, '') || content.value,
      rootId: props.parentData.rootId != -1 ? props.parentData.rootId : props.parentData.id,
      toCommentId: props.parentData.toCommentId != -1 ? props.parentData.toCommentId : props.parentData.id,
      toCommentUserId: props.parentData.createBy,
      type: 0,
      avatar: userInfo.value.avatar,
    };
  }
  const res = await sendComment(commentForm.value);
  if (res.code === 200) {
    sendActive.value = false;
    commentContent.value = '';
    content.value = '';
    imgStr.value = '';
    ElMessage({
      type: 'success',
      message: '评论成功',
    });
    // 重新加载评论列表
    emit('getList', 1);
    show.value = false;
  }
};
const setReply = (flag) => {
  show.value = flag;
};
defineExpose({ commentForm, nickname, setReply });
</script>

<style scoped lang="scss">
/* 评论框 */
.reply-box {
  display: flex;
  flex-direction: column;
}

.box-normal {
  display: flex;
  height: 50px;
  transition: 0.2s;

  .reply-box-warp {
    flex: auto;
    margin-left: 12px;
  }

  .reply-box-send {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 70px;
    margin-left: 10px;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--grey-0);
    cursor: pointer;
  }

  .send-active {
    background-color: var(--color-pink);
  }
}

.reply-box-avatar {
  display: flex;
  width: 60px;
  height: 64px;
}

.reply-box-textarea {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: 1px solid var(--grey-3);
  border-radius: 6px;
  background-color: var(--comment-color);
  font-size: 12px;
  line-height: 38px;
  color: var(--text-color);
  resize: none;
  outline: none;
}

.box-expand {
  display: flex;
  align-items: center;
  margin-left: 72px;
  margin-top: 7px;
}

.shoka-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
